<template>
	<view class="user">
		<!-- 头部 -->
		<view class="user-wrap">
			<view class="top-navbar" :style="{top:statusBarHeight+'px'}">
				<view class="title">
					我的
				</view>
			</view>
			<view class="info">
				<view class="info-avtar">
					<view class="avtar-left">
						<image v-if="mineUserInfo.portrait" class="avatar" mode="aspectFill"
							:src="mineUserInfo.portrait!==''?mineUserInfo.portrait:'https://img0.baidu.com/it/u=4142899193,1027177229&fm=253&fmt=auto&app=120&f=JPEG?w=650&h=475'">
						</image>
						<view v-else class="avtar-img">
							<view v-if="mineUserInfo.realName">{{mineUserInfo.realName.slice(0,1)}}</view>
						</view>
					</view>
					<view class="avtar-right" @click="togoNewPage()">
						<view class="nickname">{{mineUserInfo.realName || ''}}
							<!-- <view class="zhiwei">{{mineUserInfo.roleName}}</view> -->
						</view>
						<view class="telephone" v-if="!(sinfo.environment && sinfo.environment == 'wxwork')">
							<view class="left">
								{{mineUserInfo.userAccount}}
							</view>

						</view>
						<view class="nickname2">{{mineUserInfo.deptName}}</view>
					</view>
					<view class="right">
						<view class="iconfont icon-app-xiangyou" style="font-size: 28rpx;"></view>
					</view>
				</view>
				<view class="time-box" v-if="mineUserInfo.expireDate">
					账号到期时间：{{mineUserInfo.expireDate}}
				</view>
			</view>

		</view>

		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in serverList" :key="index" @click="togoOrtherPage(item.path)">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view style="width: 60%;text-align: right;" v-if="mineUserInfo.userSign==''&&item.title=='签名设置'">未设置
					</view>
					<view style="width: 60%;text-align: right;" v-if="mineUserInfo.userSign!=''&&item.title=='签名设置'">已设置
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>

		<view class="com-itembootom" v-if="userInfo&&showBack">
			<view class="item-btn" @click="outLogin()">
				<view>退出登录并取消授权</view>
			</view>
		</view>
		<tabBar :current="1" />
	</view>
</template>

<script>
	import tabBar from '../../components/tabbar/tabbar.vue';
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				statusBarHeight: 0,
				userInfo: null,
				uid: 0,
				cid: 0,
				xcxcode: '', //获取登录用户的code
				currentIndex: 0,
				serverList: [
					// {
					// 	title: '帮助中心',
					// 	icon: '/static/images/user/help.png',
					// 	path: '/pages/subPackagesD/mycenter/helpcenter'
					// },
					// {
					// 	title: '意见反馈',
					// 	icon: '/static/images/user/yijian.png',
					// 	path: '/pages/subPackagesD/mycenter/feedback'
					// },
					{
						title: '签名设置',
						icon: '/static/images/user/xd-pwd.png',
						path: '/pages/subPackagesD/mycenter/signname'
					},
					{
						title: '修改密码',
						icon: '/static/images/user/xd-pass.png',
						path: '/pages/subPackagesD/mycenter/changepwd'
					},
					{
						title: '关于我们',
						icon: '/static/images/user/xd-about.png',
						path: '/pages/subPackagesD/mycenter/about'
					}
				],
				mineUserInfo: {},
				showBack: true,
				sinfo: {},
			};
		},
		onLoad() {
			// #ifndef MP-WEIXIN
			uni.hideShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			this.GetStatusBarHeight();

			//判断是否是微信
			const sinfo = uni.getSystemInfoSync();
			this.sinfo = sinfo
			//企业微信
			if (sinfo.environment && sinfo.environment == 'wxwork') {
				this.showBack = false
				this.serverList = [{
					title: '签名设置',
					icon: '/static/images/user/xd-pwd.png',
					path: '/pages/subPackagesD/mycenter/signname'
				}, {
					title: '关于我们',
					icon: '/static/images/user/xd-about.png',
					path: '/pages/subPackagesD/mycenter/about'
				}]
			}
		},
		onShow() {
			let xcxUserData = uni.getStorageSync('userInfo');
			if (xcxUserData) {
				this.userInfo = xcxUserData;
			}
			this.getuserInfo();
		},
		methods: {
			GetStatusBarHeight() {
				let that = this;
				wx.getSystemInfo({
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight;
					},
				});
			},

			togoOrtherPage(v) {
				if (v) {
					if (v == '/pages/subPackagesD/mycenter/signname' && this.mineUserInfo.userSign == '') {
						uni.navigateTo({
							url: v
						})
					} else if (v == '/pages/subPackagesD/mycenter/signname' && this.mineUserInfo.userSign != '') {
						uni.$u.http.get(
							`/base/upload/bindFileUrl?fileUrl=${this.mineUserInfo.userSign}`
						).then(res => {
							if (res.code == 0) {
								this.pictrueUrl = res.data
								uni.navigateTo({
									url: '/pages/subPackagesD/mycenter/sginselect?url=' +
										encodeURIComponent(JSON.stringify(res.data))
								})
							}
						}).catch(err => {})
						// page.$vm.removeData()
					} else {
						uni.navigateTo({
							url: v
						})
					}
				}
			},
			togoNewPage() {
				uni.navigateTo({
					url: `/pages/subPackagesD/mycenter/userinfo?environment=${this.sinfo.environment}`
				})
			},
			//退出登录
			outLogin() {
				uni.$u.http.post(`/base/mobile/userInfo/xcxLogout/${1}`).then(res => {
					if (res.code == 0) {
						let username = uni.getStorageSync('username')
						uni.clearStorageSync();
						uni.setStorageSync('username', username)
						uni.showToast({
							icon: 'none',
							title: '退出成功!'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/subPackagesD/login/index'
							})
						}, 500)
					}
				}).catch(err => {})
			},
			getuserInfo() {
				uni.$u.http.get(`/base/mobile/userInfo/getLoginUserInfo`).then(res => {
					if (res.code == 0) {
						this.mineUserInfo = res.data
					}
				}).catch(err => {})
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.btn-hover {
		background: #f2f2f2 !important;
	}

	.user {
		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			// height: 40vw;
			padding: 0 32rpx 32rpx 0;
			z-index: 9;
			// border-radius: 0 0 20% 20%;
			// border-radius: 0 0 10rpx 10rpx;
			// background-color: #0F53AC;
			// background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
			background: url('../../static/images//user/bg-mine.png') no-repeat;
			background-size: cover;

			.top-navbar {
				width: 100%;
				height: 88rpx;
				background: transparent !important;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				position: fixed;
				// top: 0;

			}



			.info {
				width: 100%;
				margin-left: 32rpx;
				margin-top: 180rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;

				.info-avtar {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.avtar-left {
						display: flex;
						align-items: center;
						justify-content: center;
						background: #fff;
						border-radius: 10rpx;

						.avtar-img {
							width: 144rpx;
							height: 144rpx;
							background: #4FA1FF;
							line-height: 144rpx;
							text-align: center;
							color: #fff;
							font-size: 48rpx;
							border-radius: 12rpx;
							border: 2px solid #DEEDFF;
						}

						.avatar {
							width: 144rpx;
							height: 144rpx;
							border-radius: 12rpx;
							border: 2px solid #DEEDFF;
							margin: 2rpx;
						}
					}

					.avtar-right {
						width: 100%;
						margin: 0 0 0 20rpx;
						height: 156rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;


						.telephone {
							color: #fff;
							font-size: 28rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 16rpx 0 0 0;

							.left {
								word-wrap: break-word;
								word-break: break-all;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								flex: 1;
								max-width: 64vw;
							}

							
						}

						.nickname {
							color: #fff;
							font-size: 34rpx;
							display: flex;
							align-items: center;

							.zhiwei {
								margin-left: 20rpx;
								border-radius: 4px;
								background: #01c18e;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 24rpx;
								padding: 4rpx 6rpx;
							}
						}

						.nickname2 {
							color: #fff;
							font-size: 28rpx;
							padding-top: 16rpx;
						}

						.denglnui {
							width: 120rpx;
							text-align: center;
							background-color: rgba(130, 200, 230, 0.95);
							color: #fff;
							font-size: 30rpx;
							line-height: 30rpx;
							padding: 20rpx 20rpx !important;
							// box-shadow: 4rpx 4rpx 2rpx rgba(78, 101, 153, 0.4);
							border-radius: 15rpx;
						}

						.un-login {
							display: flex;
							align-items: center;
							color: #fff;
							font-size: 34rpx;
						}
					}
				
					.right {
						font-size: 24rpx;
						color: #fff;
					}
				}

				.time-box {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background-color: rgba(255, 255, 255, 0.18);
					color: rgba(255, 255, 255, 0.9);
					font-size: 28rpx;
					padding: 12rpx 40rpx;
					margin-top: 32rpx;
					border-radius: 120rpx;
					box-sizing: border-box;
				}
			}
		}

		.order-status {
			padding: 0 20rpx;
			margin-top: -10vw;

			.status-wrap {
				border-radius: 25rpx;
				overflow: hidden;

				.status-list {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					background: #fff;
					padding-top: 30rpx;
					padding-bottom: 30rpx;

					.status-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.item-icon {
							line-height: 1;
							font-size: 65rpx;
							color: #bbb;
						}

						.item-text {
							font-size: 28rpx;
							color: #666;
							margin-top: 5rpx;
						}
					}
				}
			}
		}

		.com-item {
			margin-top: 4rpx;

			.com-wrap {
				overflow: hidden;
			}
		}

		.cell {
			height: 114rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-bottom: 1px solid rgba(245, 245, 245, 1);
			;

			&:active {
				background: #f2f2f2;
			}

			// &:last-child {
			// 	border-bottom: none !important;
			// }

			.cell-left {
				display: flex;
				align-items: center;

				.cell-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.cell-text {
					color: #000000;
					font-size: 34rpx;
					margin-left: 10rpx;
				}
			}

			.iconfont {
				font-size: 36rpx;
				color: #999;
			}
		}
	}



	button {
		background-color: #fff;
		// background-color:#53C21D;
		color: #666;
		font-size: 28rpx;
		line-height: 28rpx;
		width: 80vw;
		padding: 20rpx 0;
		text-align: left;
		// padding: 20rpx 40rpx !important;
	}

	button::after {
		border: none
	}

	.com-itembootom {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;

		.item-btn {
			width: 100%;
			border-radius: 12rpx;
			border: 1px solid #0F53AC;
			text-align: center;
			font-size: 34rpx;
			font-weight: 400;
			color: #0F53AC;
			padding: 20rpx 0;
			margin: 0 32rpx;
		}
	}
</style>
